<template>
  <div style="width: 100%; height: 100vh">
    <div id="container" ref="container" style="width: 100%; height: 100vh"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'
import {
  Row,
  Col,
  Divider,
  Drawer,
  Card,
  Tooltip,
  Statistic,
  RadioGroup,
  RangePicker,
  Tag,
  ImagePreviewGroup,
  Image,
  Upload,
  Empty,
  Pagination,
  Spin
} from 'ant-design-vue'
import {
  SyncOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  DownOutlined,
  CopyOutlined,
  QuestionCircleOutlined,
  LoadingOutlined
} from '@ant-design/icons-vue'
import { requestFailed } from '@/utils/feedback'
import { useRouter } from 'vue-router'
import { apiUrl } from '@/utils/common'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { storage } from '@/utils/Storage'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import { DndPanel, SelectionSelect, BpmnElement } from '@logicflow/extension'

export default defineComponent({
  name: 'MpList',
  components: {
    Empty,
    SyncOutlined,
    PlusOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    DownOutlined,
    QuestionCircleOutlined,
    CopyOutlined,
    LoadingOutlined,
    DeleteOutlined,
    [Tag.name]: Tag,
    [Row.name]: Row,
    [Spin.name]: Spin,
    [Card.name]: Card,
    [Upload.name]: Upload,
    [ImagePreviewGroup.name]: ImagePreviewGroup,
    [Image.name]: Image,
    [Tooltip.name]: Tooltip,
    [RadioGroup.name]: RadioGroup,
    [RangePicker.name]: RangePicker,
    [Divider.name]: Divider,
    [Statistic.name]: Statistic,
    [Drawer.name]: Drawer,
    [Pagination.name]: Pagination,
    [Col.name]: Col
  },
  setup() {
    const router = useRouter()
    const state = reactive<any>({
      loading: true,
      lf: ref<LogicFlow>(),
      keywordLoading: true,
      subLoading: true,
      mediaLoading: true,
      menuLoading: true,
      selectMediaModalShow: false,
      drawerShow: false,
      replyDrawerShow: false,
      mediaAddDrawerShow: false,
      keywordDrawerShow: false,
      subDrawerShow: false,
      menuDrawerShow: false,
      mediaDrawerShow: false,
      uploadHeaders: {},
      uploadResult: {},
      uploadLoading: false,
      apiUrl: apiUrl(),
      cnode: [],
      adddata: [],
      dataList: [],
      menuDataList: [],
      mediaDataList: [],
      keywordDataList: [],
      subDataList: [],
      select_mw_id: '',
      activeKey: ref('1'),
      listQuery: {
        pageNo: 1,
        pageSize: 15,
        title: ''
      },
      listQueryMedia: {
        pageNo: 1,
        pageSize: 15,
        mw_id: ''
      },
      listQueryMenu: {
        mw_id: ''
      },
      pagination: {
        pageSizeOptions: ['15', '30', '50'],
        showSizeChanger: true,
        total: 1,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSize: 15,
        current: 1
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    })

    onMounted(() => {
      setTimeout(() => {
        initLoginFlow()
      }, 500)
    })
    const graphData = {
      nodes: [
        {
          id: 'node_id_1',
          type: 'rect',
          x: 100,
          y: 100,
          text: { x: 100, y: 100, value: '节点1' },
          properties: {}
        },
        {
          id: 'node_id_2',
          type: 'circle',
          x: 200,
          y: 300,
          text: { x: 300, y: 300, value: '节点2' },
          properties: {}
        }
      ],
      edges: [
        {
          id: 'edge_id',
          type: 'polyline',
          sourceNodeId: 'node_id_1',
          targetNodeId: 'node_id_2',
          text: { x: 139, y: 200, value: '连线' },
          startPoint: { x: 100, y: 140 },
          endPoint: { x: 200, y: 250 },
          pointsList: [
            { x: 100, y: 140 },
            { x: 100, y: 200 },
            { x: 200, y: 200 },
            { x: 200, y: 250 }
          ],
          properties: {}
        }
      ]
    }

    function initLoginFlow() {
      var container2 = document.getElementById('container') as HTMLElement
      LogicFlow.use(BpmnElement)
      state.lf = new LogicFlow({
        // 通过选项指定了渲染的容器和需要显示网格
        container: container2,
        overlapMode: 1,
        autoWrap: true,
        metaKeyMultipleSelected: true,
        plugins: [DndPanel, SelectionSelect],
        keyboard: {
          enabled: true
        },
        grid: {
          visible: false,
          size: 5
        },
        background: {
          backgroundImage:
            'url("")',
          backgroundRepeat: 'repeat'
        }
      })
      state.lf.render(graphData)
    }
    function onChoose(e) {
      console.log(e)
    }
    function uploadChange(info) {
      if (info.file.status === 'uploading') {
        state.uploadLoading = true
        return
      }
      if (info.file.status === 'done') {
        state.uploadResult = {}
        state.uploadLoading = false
        if (info.file.response.code == 200) {
          state.uploadResult = info.file.response.data
        } else {
          state.uploadResult = {}
          requestFailed(null, info.file.response.msg)
        }
      }
    }
    function beforeUpload() {
      state.uploadResult = {}
      const token = storage.get(ACCESS_TOKEN)
      if (token) {
        state.uploadHeaders['Authorization'] = 'Bearer ' + token + ':' + new Date().getTime() // 让每个请求携带token
      }
      return true
    }
    return {
      ...toRefs(state),
      uploadChange,
      beforeUpload,
      onChoose,
      router
    }
  }
})
</script>

<style>
.imgListDiv .ant-image-img {
  width: 200px;
  height: 200px;
}

.imgListDiv .ant-image {
  margin: 0px 15px 15px 0px;
}
.imgCheckBox {
  position: absolute;
  z-index: 99;
}
.ant-card-body {
  padding: 0px;
}
</style>
